import React, { useState } from 'react';

const App = () => {
  // 因为是函数式组件所以不能使用 this
  // 我们定义数据的时候就不能在通过 state 定义
  // 在函数式组件中可以使用 count 来代替 state
  // 可以使用 setCount 来代替 this.setState
  // 创建一个 count 默认值为 100，可以通过 setCount 来修改 count 值
  const [count, setCount] = useState(100)

  // 因为是函数式组件所以不能使用 this
  // 所以在写代码的时候就不需要考虑有没 this
  function add100(){
    // setCount(count + 100)
    // 也可以写成函数的方式
    // 参数就是上一次的值
    // return 出的内容就是最新的值
    setCount((prevCount)=>{
      return prevCount + 100
    })
  }

  return (
    <div>
      <h1>hooks: {count}</h1>
      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>
      <button onClick={()=>{
        setCount(count - 1)
      }}>减 1</button>
      <button onClick={add100}>加 100</button>
    </div>
  );
};

export default App;
